<template>
    <div class="home_wp" @click="AppClick">
        <div class="headerWin_type">
            <headerWin />
        </div>
        <div class="headToolMenu_type">
            <headToolMenu />
        </div>
        <div class="ordering_tool" v-if="isSHowOrdering">
            <orderTool />
        </div>
        <div class="body_type" :style="{ height: isSHowOrdering ? 'calc(100vh - 150px)' : 'calc(100vh - 118px)' }">
            <bodyList v-if="storeChart.bodyType == 'list'" />
            <bodyChart v-if="storeChart.bodyType == 'chart'" />
        </div>
        <div class="body_list_footer_type">
            <footerBodyList />
        </div>
        <div class="footer_style">
            <footBar />
        </div>
        <diao_msg ref="diaoMsg" />
    </div>
</template>

<script setup>
import { onUnmounted, onMounted, ref, watch } from 'vue'
const { ipcRenderer } = require('electron');
import { ElNotification } from 'element-plus';

import MQTT from '@/utils/mqtt.js'
import { mainStore, chartStore } from '@/store/index.js';
import bus from '@/utils/bus.js'
import logHandler from '@/utils/logHandler.js'



import headerWin from '../header/header_win.vue'
import headToolMenu from '../header/head_toolMenu.vue'
import bodyList from '../body/body_list.vue'
import bodyChart from '../body/body_chart.vue'
import footerBodyList from '../footer/footer_body_list.vue'
import footBar from '../footer/foot_bar.vue'
import orderTool from '../view_list/order_tool.vue'
import diao_msg from '../view_list/diao_msg.vue'



const storeChart = chartStore();
const storeMain = mainStore();

const diaoMsg = ref(null)
const isSHowOrdering = ref(false)
const hangqingMqtt = ref()

const ElNotificationMsg = ref(null)
watch(() => [storeMain.classHeyueIndex, storeChart.selectBodyListTable], () => {
    storeChart.changehagnqingData(undefined)
    hangqingMqtt.value.subscribe("hangqing/+")
})


onMounted(async () => {
    window.addEventListener('keydown', handleKeydown);
    let res = await storeMain.getConfigJsInfo('heyueinfo', { type: 1, lb: "1" })
    if (res) {
        hangqingMqtt.value = new MQTT()
        storeChart.sethangqingMqtt(hangqingMqtt.value)
        hangqingMqtt.value.connect();
    }
    bus.off('qie_hang_qing')
    bus.on('qie_hang_qing', () => {
        storeChart.changehagnqingData(undefined)
        hangqingMqtt.value.subscribe("hangqing/+")
    })

    ipcRenderer.on('right_click_msg_win', async (e, v) => {
        let msg = ''
        if (v.type == '软件退出登录') {
            diaoMsg.value.open('软件退出登录,请重新登录！')
        }
        if (v.type == '打开下单') {
            ipcRenderer.send('createLogin', { configInfo: JSON.stringify(storeMain.ConfigJsInfo) })
        }
        if (v.type == '加入自选') {
            storeMain.setZixuanHeyue({ type: 1, name: '自选合约', id: storeMain.selectHeyue.heyue_id })
            msg = '加入自选成功'
        }
        if (v.type == 'mssg') {
            if (ElNotificationMsg.value) {
                ElNotificationMsg.value.close()
                ElNotificationMsg.value = null
            }
            msg = v.msg
        }
        if (v.type == '周期') {
            storeChart.changeBodyType('chart')
            storeChart.changeKlineAPiVal(v.msg)
            storeChart.changeSelectbodyChartListTab('K线图')
            storeChart.changeHeadApiVal({ type: v.msg })
        }
        if (v.type == '清除日志') {
            let res = logHandler.deleteFile()
            if (res) {
                msg = '日志清除成功！'
            } else {
                msg = '日志清除失败！'
            }
        }
        if (v.type == '升级' || v.type == '恢复以前版本') {
            msg = v.msg
        }
        if (v.type == '下单工具条') {
            isSHowOrdering.value = !isSHowOrdering.value
        }
        if (v.type == 'ping服务器') {
            ipcRenderer.send('ping-command', storeMain.xianlu.url.split('://')[1].split(':')[0])
        }
        if (v.type == 'ping服务器失败') {
            msg = v.type
        }
        if (msg) {
            ElNotificationMsg.value = ElNotification({
                title: '操作提示',
                message: msg,
                position: 'bottom-right',
                duration: 1000,
            })
        }
    })
})

onUnmounted(() => {
    bus.off('hideRightView')
    bus.off('qie_hang_qing')
    window.removeEventListener('keydown', handleKeydown);
})
function AppClick() {
    bus.emit('hideRightView')
    ipcRenderer.send('hide-right-click-menu')
}

function handleKeydown(event) {
    const key = event.key;
    // 判断是否为字母或数字
    if (/^[a-zA-Z0-9]$/.test(key)) {
        ipcRenderer.send('open-anjian')
    }
}
</script>

<style scoped lang="less">
.home_wp {
    position: relative;
    height: calc(100Vh - 5px);

    .headerWin_type {
        height: 25px;
    }

    .headToolMenu_type {
        height: 35px;
    }

    .ordering_tool {
        border-top: 1px solid #000;
        background-color: #23262a;
        height: 32px;
    }

    .body_type {
        position: relative;
        height: calc(100vh - 118px);
    }

    .body_list_footer_type {
        height: 28px;
    }

    .footer_style {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 28px;
    }
}
</style>
